
<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';


  const imgUrl = ref('https://img1.baidu.com/it/u=795781548,2015246300&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=591')

const changeImg = () => {
    imgUrl.value = 'https://img1.baidu.com/it/u=188768877,1144324302&fm=253&fmt=auto&app=120&f=JPEG?w=425&h=239'
}

const isBlue = ref(false)
const isOrange = ref(false)


const toggleClass = () => {
  isBlue.value = !isBlue.value
  isOrange.value = !isOrange.value
}

</script>

<!-- 结构 -->
<template>
  <!-- v-bind 基本用法 v-bind:属性名  简写是 :属性名 -->
 <!-- <img @click="changeImg" v-bind:src="imgUrl" alt=""> -->
 <img @click="changeImg" :src="imgUrl" alt="">

 <!-- ：class="{类名:是否生效的表达式}"" -->
 <div class="box" :class="{skyblue:isBlue,orange:isOrange}" @click="toggleClass"></div>
</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
  .box{
    width: 100px;
    height: 100px;
    border:1px black solid;
  }
  .skyblue{
    background-color: skyblue;
  }
  .orange{
    border-color: orange;
    border-width: 10px;
  }
</style>
